<template>
	<view style="display: flex;">
		<!-- 左侧：商品分类列表-y轴滚动视图 -->
		<scroll-view scroll-y :style="{width: '160rpx',height:widowHeight+'px'}">
			<view @click="cur(index)" :class="{category:true,cur:index==curCategory}" v-for="(i,index) in categoryList" :key="index">{{i.cname}}</view>
		</scroll-view>
		<!-- 右侧：该分类下的商品y轴滚动视图 -->
		<scroll-view scroll-y :style="{width: '590rpx',height:widowHeight+'px'}">
			 <uni-list>
				 <uni-list-item
				 v-for="item in resultList.data"
				 :key="item.lid"
				 ellipsis="2"
				 clickable 
				 showArrow 
				 :title="item.title"  
				 :thumb="$url.baseURL+item.pic"
				 thumb-size="lg"
				 link="navigateTo"
				 :to="`/pages/product-details/product-details?pid=${item.lid}`"
				 ></uni-list-item>
			 </uni-list>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultList:[],
				widowHeight:500, //窗口高度= 屏幕高度-标题栏高度- 页签栏高度
				categoryList:[], //商品类别列表
				curCategory:-1, //当前显示的类别名 默认值：-1当有类别时，该变量设置为0
			};
		},
		methods:{
			cur(index){
				this.curCategory = index
			},
		},
		watch: {
			curCategory(newVal,oldVal) {
				if(oldVal!=newVal){
					let kw = this.categoryList[newVal].keywords
					//拼接请求地址和参数
					let url = `${this.$url.productList}?kw=${kw}`
					uni.request({
						method:'GET',
						url:url,
						success: (res) => {
							this.resultList = res.data
							//console.log(this.resultList);
							uni.showLoading({
								title:"数据加载中.."
							})
						},
						fail: (err) => {
							console.log(err);
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				}
				
			}
		},
		onLoad() {
			//调用API读取当前系统信息，获取屏幕尺寸
			uni.getSystemInfo({
				success: (result) => {
					// console.log(result);
					this.widowHeight = result.windowHeight
					// console.log('存到本地的windowHeight：',this.widowHeight);
					let url = this.$url.category
					uni.showLoading({
						title:'商品类目加载中..',
					})
					uni.request({
						method:"GET",
						url:url,
						success: (res) => {
							this.categoryList = res.data.concat(res.data)
							//请求到了数据然后将当前类别赋值为0则会监视curCategory值会改变自动发请求
							this.curCategory = 0
							// console.log("请求到当前列表：",this.categoryList);
						},
						fail: (err) => {
							console.log(err);
						},
						complete: () => {
								uni.hideLoading()
						}
					})
				}
			})
			
		},
	}
</script>

<style lang="scss">
.category{
	font-size: 32rpx;
	background-color: #F1F1F1;
	line-height: 70rpx;
	padding-left: 10rpx;
	border-bottom: 1px solid #C0C0C0;
}
.cur{
	background-color: #fff;
}

</style>
